import React from "react"
import classNames from 'classnames'

interface BaseButtonProps {
  className?: string;
  disable?: boolean;
  size?: 'large' | 'small';
  btnType?: 'primary' | 'default' | 'danger' | 'link';
  children?: React.ReactNode;
  href?: string;
}
// ButtonProps’ prop fields include BaseButtonProps and ButtonHTMLAttributes and AnchorHTMLAttributes
// with Partial, all the prop fields is optional
export type ButtonProps = Partial<BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement> & React.AnchorHTMLAttributes<HTMLElement>>

const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
  const { className, btnType, disable, size, children, href, ...restProps } = props
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    'disabled': (btnType === 'link') && disable
  })
  if (btnType === 'link' && href) {
    return (
      // add the rest props to tag a
      <a href={href} className={classes} {...restProps}>{children}</a>
    )
  } else {
    return <button className={classes} disabled={disable} {...restProps}>{children}</button>
  }
}

Button.defaultProps = {
  disable: false,
  btnType: 'default'
}

export default Button